import React from 'react';
import { ThreeHeaderC, PrimaryC } from '../../components';

class ThreeHeaderCDemo extends React.Component {
  state = {
    showIncome: false, // 当前是否展开
    showIncomeR: false,
  };

  handleChangeStatus = (i) => {
    this.setState({
      showIncome: i,
    });
  };

  handleChangeStatusRight = (i) => {
    this.setState({
      showIncomeR: i,
    });
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <ThreeHeaderC
          title='三级标题展开按钮'
          Left={<div>XXXXX标题1左侧内容</div>}
          Right={<div>标题1右侧内容</div>}
          arrowBtn={true}
          onExpendClick={this.handleChangeStatus} // 展开箭头按钮事件
          topHeight={true}
        />
        {this.state.showIncome ? <div style={{ height: '100px' }}>展开内容</div> : ''}
        <ThreeHeaderC
          title='右侧展开，底部无边距'
          Left={<div>xxxx</div>}
          Right={<div style={{ display: 'inline-block' }}>xxxx</div>}
          arrowBtn={true}
          arrowBtnPosition={'right'}
          arrowBtnTxt={'明细'}
          showContent={this.state.showIncomeR}
          onExpendClick={this.handleChangeStatusRight} // 展开箭头按钮事件
          bottomHeight={false}
        />
        {this.state.showIncomeR ? <div style={{ height: '100px' }}>内容</div> : ''}
        <PrimaryC
          title='变更状态'
          onClick={() => {
            this.setState({ showIncomeR: !this.state.showIncomeR });
          }}
        />
        <br />
      </div>
    );
  }
}

export default ThreeHeaderCDemo;
